<template>
    <div class="outer">
        <div class="inner">
            <div class="select_panel" >

                    <div class="each_line">
                        <div class="jiage_zonglei select_title">价格总类：</div>
                        <div class="head_content">
                            <div class="radio_wapper">
                                <el-radio v-model="radioCheck" label="0" class="myradio">
                                    <div class="radio_inner">所有</div>
                                </el-radio>
                            </div>

                            <div class="radio_wapper">
                                <el-radio v-model="radioCheck" label="2" class="myradio">
                                    <div class="radio_inner">免费</div>
                                </el-radio>
                            </div>

                            <div class="radio_wapper">
                                <el-radio v-model="radioCheck" label="1" class="myradio">
                                    <div class="radio_inner">付费</div>
                                </el-radio>
                            </div>

                        </div>

<!--                        <div class="fold" @click="fold">-->
<!--                            隐藏更多<i :class="isFold? 'el-icon-arrow-down': 'el-icon-arrow-up'" style="margin-left: 4px;"></i>-->
<!--                        </div>-->

                    </div>

<!--                    数据循环部分-->
                    <div class="each_line" v-for="outerItem in typeList" :key="outerItem.creationTypeModel.id">
                        <div class="select_title">{{outerItem.creationTypeModel.creationTypeName}}:</div>
                        <div class="select_content">

                            <div class="radio_wapper" v-for="innerItem in outerItem.creationTypeModels" :key="innerItem.id">
                                <el-checkbox v-model="checkList" :label="innerItem.id" class="myradio">
                                    <div class="radio_inner">{{innerItem.creationTypeName}}</div>
                                </el-checkbox>
                            </div>

                        </div>
                    </div>

            </div>

            <div class="articleList">
                <div v-for="item in articleList" :key="item.Id" class="listItem" @click.stop="toDetail(item.Id,item)">
                    <div class="item_category">
                        <div class="item_category_inner">
<!--                            {{item.ClassifyNames.split(',').join(' ')}}-->
                            {{filterCategory(item.ClassifyNames)}}
                        </div>
                    </div>
                    <div class="item_right">

                        <div class="title_author_price">
                            <div class="title_author">
                                <div class="title">{{item.Title}}</div>
                                <div class="author">作者：{{item.Publisher}}</div>
                            </div>
<!--                            <div class="price">￥200</div>-->
                        </div>
                        <div class="item_content">

                            <div class="item_content_message">
<!--                                {{item.Description}}-->
                              如果我爱上你的笑容 要怎么收藏要怎么拥有
                              如果我爱上你的笑容 要怎么收藏要怎么拥有
                              如果我爱上你的笑容 要怎么收藏要怎么拥有
                              如果我爱上你的笑容 要怎么收藏要怎么拥有
                              如果我爱上你的笑容 要怎么收藏要怎么拥有
                              如果我爱上你的笑容 要怎么收藏要怎么拥有
                              如果我爱上你的笑容 要怎么收藏要怎么拥有
                            </div>
                            <el-image class="item_content_img" :src="item.ImgUrl" :fit="fit">
                                <template #error>
                                    <div class="image-slot" :style="{background:'url('+require('@/assets/img/profile_1.png')+') 100% 100% no-repeat'}"></div>
                                </template>
                            </el-image>

                        </div>

                        <div class="collect_start_price">
                            <div class="collect_start">

                                <template v-if="item.IsCollection == 0">
                                    <i class="iconfont icon-jiaxingshoucang collect" @click.stop="collectionAdd(item.IsCollection,item.Id)"></i><i class="collect_text">{{item.CollectionNum}}</i>
                                </template>
                                <template v-else>
                                    <i class="iconfont icon-shoucangjia collect collect_select" @click.stop="collectionDel(item.IsCollection,item.Id)"></i><i class="collect_text">{{item.CollectionNum}}</i>
                                </template>

                                <template v-if="item.IsSupported == 0">
                                    <i class="iconfont icon-dianzan start"  @click.stop="supportAdd(item.IsSupported,item.Id)"></i><i class="start_text">{{item.SupportNum}}</i>
                                </template>
                                <template v-else>
                                    <i class="iconfont icon-dianzan1 start collect_select"  @click.stop="supportDel(item.IsSupported,item.Id)"></i><i class="start_text">{{item.SupportNum}}</i>
                                </template>


                            </div>

                            <template v-if="item.ScanType == 2">
                                <div class="price">免费</div>
                            </template>
                            <template v-else>
                                <div class="price">￥{{item.Price}}</div>
                            </template>

                        </div>

                        <div class="item_choose">
                            <div @click.stop="to_zhineng(item)">智能合约</div>
                            <div>授权</div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="fen_ye_qi">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="currentChange"
                        :current-page="current_page"
                        @prev-click="prevClick"
                        @next-click="nextClick">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>

    import {IndexScriptWritingListByWhere,ScriptWritingListByWhere} from "../../../api/ScriptWriting";
    import {IndexCreationTypeListByTypeId} from "../../../api/ScriptWriting";
    import {CollectionEdit} from "../../../api/dsp/CollectionEdit";
    import {CollectionDel} from "../../../api/dsp/CollectionEdit";
    import {getUserInfo} from "../../../utils/auth";

    export default {
        name: "dsp_juben",
        watch:{
            radioCheck(){

                this.requestContentList()

            },
            checkList(){

                this.requestContentList()

            }

        },
        data(){
            return{
                isFold:false,
                folding_or_not:{
                    // height:'52px',
                },
                articleList:[],
                total:undefined,
                current_page:1,
                typeList:[],
                checkList:[],
                checkRows:0,
                radioCheck:'0',
            }
        },
        created(){

            if(this.$route.query.typeid != undefined){
                this.checkList.push(parseInt(this.$route.query.typeid))
            }

            //初始化下拉框高度
            this.folding_or_not.height="52px"

            //    获取创作类型列表数据
            IndexCreationTypeListByTypeId({typeid:1}).then(res=>{
                this.typeList=res.data
                let totalCount=0
                res.data.forEach(item=>{
                    totalCount=totalCount+item.creationTypeModels.length
                })

                //先计算出满行
                if(totalCount<=8){
                    this.checkRows=1
                }else{
                    this.checkRows=parseInt(totalCount/8)
                    this.checkRows=this.checkRows+1
                }

                //第一次请求回来之后再请求
                this.requestContentList()

            })

        },

        methods:{
            to_zhineng(data){
            //      ContractId
            //    TokenId
            //    http://106.14.18.148:4000/tokens/0xefb454e89efff1e734432060e34d536dfa8eed65/instance/57/token-transfers

                let href='http://106.14.18.148:4000/tokens/'+data.ContractId+'/instance/'+data.TokenId+'/token-transfers'
                window.open(href, '_blank');
            },
            filterCategory(data){

                if(data == null){
                    return ''
                }

                return data.split(',')[0]

            },
            //折叠
            fold() {
                if (this.isFold){

                    //根据返回回来的 数据 动态设置 选择面板的高度
                    //多一行多51px
                    this.folding_or_not.height=(52+(this.checkRows*53))+"px"
                    // this.folding_or_not.height=undefined
                }else{
                    this.folding_or_not.height="52px"
                }

                this.isFold=!this.isFold;
            },

            toDetail(id,item){

              this.$router.push({path:'/dsp/dspDetail',query:{id:id}})

            },

            //改变当前页
            currentChange(res){
                this.current_page=res

                this.requestContentList()

            },

            requestContentList(){
                if(getUserInfo() == undefined){
                    //    获得作品列表数据
                    let data={
                        creationTypeId:1,
                        classifyIds:this.checkList.join(','),
                        scanType:parseInt(this.radioCheck),
                        page:this.current_page,
                        pagesize:8,
                    }

                    IndexScriptWritingListByWhere(data).then(res=>{
                        //获取数据
                        this.articleList=res.data
                        console.log('短视频剧本为',res)

                        //   判断总共有多少页

                        if(res.total<=8){
                            this.total=10
                        }else{
                            //    判断总数是否为8的整倍数
                            if((parseInt(res.total) % 8) != 0){

                                this.total=parseInt(parseInt(res.total) / 8)*10+10

                            }else{

                                this.total=parseInt(parseInt(res.total) / 8)*10

                            }

                        }
                    })
                }else{
                    //    获得作品列表数据
                    let data={
                        creationTypeId:1,
                        classifyIds:this.checkList.join(','),
                        scanType:parseInt(this.radioCheck),
                        page:this.current_page,
                        pagesize:8,
                    }

                    ScriptWritingListByWhere(data).then(res=>{
                        //获取数据
                        this.articleList=res.data
                        console.log('短视频剧本为',res)

                        //   判断总共有多少页

                        if(res.total<=8){
                            this.total=10
                        }else{
                            //    判断总数是否为8的整倍数
                            if((parseInt(res.total) % 8) != 0){

                                this.total=parseInt(parseInt(res.total) / 8)*10+10

                            }else{

                                this.total=parseInt(parseInt(res.total) / 8)*10

                            }

                        }
                    })
                }

            },

            //上一页
            prevClick(){

            },

            //下一页
            nextClick(){
            },

            //点赞
            collectionAdd(isCollected,id){
                let data={
                    ScriptWritingId:id,
                    SelectType:1
                }

                CollectionEdit(data).then(res=>{
                    this.requestContentList()
                    console.log('点赞后再次请求',this.articleList)
                })
            },

            //取消赞
            collectionDel(isCollected,id){
                let data={
                    ScriptWritingId:id,
                    SelectType:1
                }

                CollectionDel(data).then(res=>{
                    this.requestContentList()
                    console.log('点赞后再次请求',this.articleList)
                })
            },

            //收藏
            supportAdd(isSupported,id){

                let data={
                    ScriptWritingId:id,
                    SelectType:2
                }

                CollectionEdit(data).then(res=>{
                    this.requestContentList()
                    console.log('点赞后再次请求',this.articleList)
                })
            },

            //取消收藏
            supportDel(isSupported,id){

                let data={
                    ScriptWritingId:id,
                    SelectType:2
                }

                CollectionDel(data).then(res=>{
                    this.requestContentList()
                    console.log('点赞后再次请求',this.articleList)
                })
            },

        },
    }
</script>

<style scoped>
    .outer{
        width: 100%;
    }
    .inner{
        width: 1001px;
        margin: 0px auto;
        overflow: hidden;
    }
    .select_panel{
        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        margin-top: 15px;
        transition: 0.5s;
        overflow: hidden;
    }
    .select_panel>div{
        border-bottom: 1px solid #E5E5E5;;
    }
    .each_line{
        display: flex;
        width: 100%;
        min-height: 52px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .jiage_zonglei{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
    }
    .select_title{
        /*width: 76px;*/
        margin-left: 42px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 52px;

        /*文字溢出省略号*/
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .head_content{
        width: 769px;
        height: 52px;
        display: flex;
        align-items: center;
        margin-left: 10px;
    }
    .select_content{
        width: 856px;
        min-height: 52px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 10px;
    }
    .radio_wapper{
        width: 107px;
        height: 52px;
        line-height: 52px;
    }
    .myradio{
        /*margin-left: -30px;*/
    }
    .select_content>.myradio:nth-of-type(1){
        margin-left: 0px;
    }

    .radio_inner{
        width: 87px;
        margin-left: -4px;

        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        /*line-height: 12px;*/


        /*文字溢出省略号*/
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .fold{
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
    }

    /*.articleList{*/
    /*    width: 100%;*/
    /*    height: 1100px;*/
    /*    margin-top: 22px;*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    justify-content: space-between;*/
    /*}*/

    .articleList{
        width: 100%;
        /*height: 1180px;*/
        min-height: 280px;
        /*max-height: 1180px;*/
        max-height: 1200px;
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .listItem{
        width: 490px;
        height: 280px;
        background: #EEEEEE;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        display: flex;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .item_category{
        width: 50px;
        height: 280px;
        background: #2EB0C6;
        border-radius: 4px 0px 0px 4px;
        display: flex;
        align-items: center;
    }
    .item_category_inner{
        width: 17px;
        min-height: 0px;
        max-height: 255px;
        /*height: 100px;*/
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        margin: 0px auto;

        overflow: hidden;

    }
    .item_right{
        flex-grow: 1;
        background: #FFFFFF;
        position: relative;
    }
    .title_author_price{
        max-width: 242px;
        display: flex;
        margin-left: 25px;
    }
    .title_author{
        margin-top: 31px;
    }
    .title_author>div{
        max-width: 242px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .title{
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }
    .author{
        margin-top: 15px;
        /*height: 14px;*/
        font-size: 14px;
        line-height: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }
    .price{
        /*margin-top: 37px;*/
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF4444;
    }
    .item_content{

        width: 391px;
        height: 47px;
        font-size: 14px;
        line-height: 25px;
        margin: 0px auto;
        margin-top: 29px;

        /*多行文本溢出省略号*/
        /*display: -webkit-box;*/
        /*-webkit-box-orient: vertical;*/
        /*-webkit-line-clamp: 2;*/
        /*overflow: hidden;*/
        max-width: 242px;
        margin-left: 25px;
        margin-top: 10px;

    }
    .item_content_message{
        font-size: 14px;
        line-height: 25px;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .item_content_img{
        width: 130px;
        height: 150px;
        margin-right: 20px;
        border-radius: 5px;

        position: absolute;
        top:20px;
        right: 0px;
    }
    .image-slot{
        width: 130px;
        height: 150px;
        margin-right: 20px;
        border-radius: 5px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .collect_start_price{
        width: 391px;
        margin: 0px auto;
        position: absolute;
        left: 25px;
        bottom: 73px;
        display: flex;
        justify-content: space-between;
        height: 25px;
    }
    .collect,.start{
        font-size: 15px;
        line-height: 15px;
        cursor: pointer;
    }
    .start{
        margin-left: 17px;
    }
    .collect_select{
        color: yellow;
    }
    .collect_text,.start_text{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #686F7A;
        line-height: 14px;
        margin-left: 4px;
    }
    .item_choose{
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 70px;
        border-top: 1px solid #E5E5E5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item_choose>div{
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        text-align: center;
    }
    .item_choose>div:nth-of-type(1){
        width: 92px;
        height: 36px;
        background: rgba(246, 246, 246, 0.15);
        border: 1px solid #9D9D9D;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-left: 118px;
    }
    .item_choose>div:nth-of-type(2){
        width: 92px;
        height: 36px;
        background: rgba(246, 246, 246, 0.15);
        border: 1px solid #9D9D9D;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-right: 119px;
    }

    .fen_ye_qi{
        min-width: 109px;
        max-width: 430px;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 26px;
        margin-bottom: 115px;
    }
</style>
